* {
  padding: 0;
  margin: 0;
}
.clear {
  clear: both;
}
.box {
  width: 700px;
  height: 530px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
.box .chats {
  height: 400px;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px;
  background: url('images/bgd.jpg') no-repeat;
  background-size: 100%;
}
.box .chat {
  width: 100%;
}
.box .chat .chat_left .img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
.box .chat .chat_left .content_left {
  color: #000;
  display: inline-block;
  background-color: #EEEEEE;
  padding: 10px 10px;
  margin: 10px 0px 5px 5px;
  border-radius: 4px;
}
.box .chat .chat_left .content_left .triangle-left {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 15px solid #EEEEEE;
  border-bottom: 10px solid transparent;
  margin-left: -15px;
}
.box .chat .chat_right {
  float: right;
}
.box .chat .chat_right .img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
.box .chat .chat_right .content_right {
  color: #fff;
  display: inline-block;
  background-color: #2681F2;
  padding: 10px 10px;
  margin: 10px 0px 5px 0px;
  border-radius: 4px;
}
.box .chat .chat_right .content_right .triangle-right {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 15px solid #2681F2;
  border-bottom: 10px solid transparent;
  margin-right: -15px;
}
.box .input {
  height: 130px;
}
.box .input textarea {
  width: 100%;
  resize: none;
  border: none;
}
.box .input p {
  padding: 0;
  text-align: right;
}
.box .input p button {
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  background: #0188FB;
}
